<template>
    <div>
        <div class="modify-information-wrap">
            <div class="my-header">
                <div class="back-wrap">
                    <span class="iconfont idon-left" @click="fanhui()">&lt;</span>
                </div>
                <div>
                    <span>编辑个人资料</span>
                </div>
            </div>
            <div class="content">
                <div class="content-item">
                    <div class="cropperImg">
                        <div>
                            <div class="show">
                                <input type="file" class="img-input" accept="image/png,image/jpeg" @change="upload" />
                                <img :src="`http://43.138.15.137:3000${op.userAvatar}`" alt=""
                                    style="border-radius: 50%" class="oppp" ref="img" />
                                <div class="desc">点击更换头像</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-item">
                    <p>昵称</p>
                    <input type="text" name="nickname" id="nickname" class="input" v-model="op.userNickname" />
                </div>
                <div class="content-item">
                    <p>签名</p>
                    <input type="text" name="desc" id="desc" v-model="op.userDesc" class="input" />
                </div>
                <div class="content-item">
                    <p>性别</p>
                    <select name="gender" id="gender" class="input" v-model="op.userGender">
                        <option value="1">男</option>
                        <option value="0">女</option>
                    </select>
                </div>
                <div class="content-item">
                    <p>年龄</p>
                    <input type="number" name="age" id="age" min="1" max="150" class="input number-input"
                        v-model="op.userAge" />
                </div>
                <div class="content-item">
                    <p>地区</p>
                    <input type="text" name="address" id="address" class="input" v-model="pl" />
                </div>
            </div>
        </div>
    </div>
    <enter_common @then="thenfn" :flag="enter_flag" :title="'要修改吗?'" />
    <CavasPage :CropperShow='CropperShow' :ImgData='ImgData' @handleClose="yi" @handleResult="mi" />
</template>
<script setup>
import { ref, onMounted, defineEmits } from 'vue'
import { postmodifyUsrInfoAPI, uploadAvata, modifyUserInf } from '../../api/home.js'
import CavasPage from './CavasPage.vue'
import { useRouter } from 'vue-router'
const emit = defineEmits(['flag'])
const router = useRouter()
let op = ref({})
let ImgData = ref('')
let pl = ref('中国')
let num = ref(2)
let CropperShow = ref(false)
let enter_flag = ref(false)
// 个人信息接口
const userId = JSON.parse(localStorage.getItem('user')).userId
const yi = (bool) => {
    CropperShow.value = bool
}
let srcoo = ref('')
const mi = (bool, ok) => {
    let dom = document.querySelector('.oppp')
    dom.src = ok
    CropperShow.value = bool
    srcoo.value = ok
}

genren()
function upload(e) {
    let files = e.target.files[0]
    const reader = new FileReader();
    reader.readAsDataURL(files);
    reader.onload = function (ev) {
        ImgData.value = ev.target.result;
    }
    CropperShow.value = true
}

async function genren() {
    let res = await postmodifyUsrInfoAPI({
        userId
    })
    op.value = res.data.data
}
let dum = ref(0)
onMounted(() => {
    let dom = document.querySelector('.content')
    dom.addEventListener('click', function (event) {
        dum.value = 1
    })
})
const img = ref(null)
let fanhui = function () {
    if (dum.value == 1) {
        // num.value = 1
        enter_flag.value = true
    } else {
        emit('flag')
    }
}
async function ok() {
    const uploadResult = await uploadAvata(
        userId, { fieldName: srcoo.value })
    uploadData()
    if (uploadResult.status == 200) {
        let res = await modifyUserInf(userId, {
            userNickname: op.value.userNickname,
            userDesc: op.value.userDesc,
            userGender: op.value.userGender,
            userAge: op.value.userAge,
            userAddress: op.value.userAddress,
            userAvatar: op.value.userAvatar,
        })
        if (res.data.code == 200) {
            location.reload()
        }
    }
}
let no = function () {
    history.go(0)
}

async function uploadData(e) {
    let files = e.target.files
    console.log(files)
    if (!files.length) return
    if (!/(jpeg|png)/i.test(files[0].type)) {
        alert('上传的视频只能是jpg类型的')
        e.target.value = ''
        return
    }
    if (files[0].size > 50 * 1024 * 1024) {
        alert('上传的图片不能大于50MB')
        return
    }
    let formData = new FormData()
    let url = window.URL.createObjectURL(files)
    formData.append('avatarurl', files[0])
}
function thenfn(flag) {
    if (flag) {
        ok()
        emit('flag')
        enter_flag.value = false
    } else {
        emit('flag')
        enter_flag.value = false
    }
}
</script>

<style lang="scss" scoped>
@function r($v) {
    @return $v / (390 / 10rem)
}

* {
    color: #fff;
}

::-webkit-scrollbar {
    display: none;
}

.modify-information-wrap {
    transition: transform 0.3s, -webkit-transform 0.3s;
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #161622;
}

.big-box {
    transition: transform 0.3s, -webkit-transform 0.3s;
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.menu-item {
    font-size: r(12);
}

.confirm {
    //   display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.3);

    .confirm-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;

        .confirm-content {
            width: 2r(70);
            border-radius: r(13);
            background: rgba(22, 24, 35, 0.98);

            .text {
                padding: r(19) r(15);
                line-height: r(22);
                text-align: center;
                font-size: r(18);
                color: rgba(255, 255, 255, 0.5);
            }

            .operate {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                text-align: center;
                font-size: r(18);

                .operate-btn {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    line-height: r(22);
                    padding: r(10) 0;
                    border-top: r(1) solid rgba(0, 0, 0, 0.3);
                    color: rgba(255, 255, 255, 0.3);
                }

                .left {
                    border-right: r(1) solid rgba(0, 0, 0, 0.3);
                }
            }
        }
    }
}

.my-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #e8e8e9;
    height: r(44);
    line-height: r(44);
    font-size: r(16);
    z-index: 3;
    background: #161622;

    .back-wrap {
        position: absolute;
        left: r(10);

        .icon-left {
            padding: r(10);
        }
    }
}

.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    .content-item {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: r(10) r(20);
        line-height: r(44);
        height: r(44);
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;

        p {
            font-size: r(16);
        }

        .input {
            width: r(200);
            font-size: r(16);
            background: #161622;
            color: #e8e8e9;
            text-align: right;
        }

        .cropperImg {
            .container {
                display: none;
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: #fff;
                z-index: 3;
            }

            div {
                .show {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    height: 100%;
                    line-height: 100%;
                    padding: 0 0 r(20) 0;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    position: relative;

                    .avatar {
                        margin: r(20) 0;
                        border-radius: 50%;
                    }

                    .desc {
                        font-size: r(12);
                        color: #8b8c96;
                    }

                    .img-input {
                        position: absolute;
                        opacity: 0;
                        top: r(20);
                        width: r(100);
                        height: r(140);
                    }
                }
            }
        }
    }

    .img-input {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
    }

    .content-item:first-of-type {
        height: 100%;
        line-height: 100%;
        padding: 0 0 r(20) 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-bottom: r(1) solid rgba(41, 40, 37, 0.8);
    }
}

.show {
    img {
        width: r(160);
        height: r(160);
    }
}
</style>
